$mapbodywidth: 100%;
$mapbodyheight: 100%;
$mapnavbarheight: 80px;


$arcgis_widget_button_size: 45px;
$arcgis_widget_font_size: 18px;
$arcgis_widget_icon_size: 19px;

$arcgis_widget_margin: 15px;
$arcgis_widget_full_width: 100%;

$Calcite_Gray_350_Dark: #5c5c5c;
$Calcite_Gray_450_Dark: #787878;
$Calcite_Gray_700_Dark: #d1d1d1;
$Calcite_Gray_400_Dark: #666666;
$theme_dark_control_text_color_hover: #ffffff;
$theme_dark_control_text_color:#242424;
$Calcite_Gray_300: #4c4c4c;
$Calcite_Gray_100: #333333;
$Calcite_Gray_200: #404040;
$Calcite_Gray_700: #d1d1d1;
// Widget light color variables
$theme_light_arcgis_widget_bg:rgba(255, 255, 255, 0.5);
$theme_light_arcgis_widget_bg1:rgba(255, 255, 255, 0.5);
$theme_light_arcgis_widget_bg2:rgba(255, 255, 255, 0.1);
$theme_light_arcgis_widget_color:rgba(0, 0, 0, 1);
$theme_light_arcgis_widget_border: rgba(243, 247, 250, 1);
$theme_light_arcgis_active_background: rgba(82, 118, 216, 1);
$theme_light_arcgis_active_text_color: rgba(0, 0, 0, 1);
$theme_light_arcgis_popup_content_color1:rgba(255, 255, 255, 1);
$theme_light_arcgis_popup_content_color2:rgba(247, 247, 247, 1);
$theme_light_arcgis_popup_header_color:rgba(255, 255, 255, 1);

$theme_light_arcgis_widget_shadow: rgba(55, 55, 55, 0.5);
$theme_light_arcgis_disabled_text_color: $Calcite_Gray_350_Dark;
$theme_light_arcgis_placholder: $Calcite_Gray_450_Dark;

// Widget dark color variables
$theme_dark_arcgis_widget_bg: rgba(80, 94, 123, 0.5);
$theme_dark_arcgis_widget_bg1: rgba(80, 94, 123, 0.6);
$theme_dark_arcgis_widget_bg2: rgba(80, 94, 123, 0.1);
$theme_dark_arcgis_widget_color: rgba(255, 255, 255, 1);
$theme_dark_arcgis_widget_border: rgba(82, 93, 123, 1);
$theme_dark_arcgis_active_background: rgba(32, 136, 245, 1);
$theme_dark_arcgis_active_text_color: rgba(255, 255, 255, 1);
$theme_dark_arcgis_popup_content_color1:rgba(15, 21, 39, 0.1);
$theme_dark_arcgis_popup_content_color2:rgba(0, 0, 0, 0.5);
$theme_dark_arcgis_popup_header_color:rgba(36, 65, 122, 1);


$theme_dark_arcgis_widget_shadow: rgba(55, 55, 55, 0.5);
$theme_dark_arcgis_disabled_text_color: $Calcite_Gray_350_Dark;
$theme_dark_arcgis_placholder: $Calcite_Gray_450_Dark;


.theme-default {
  .mapscreen {
    height: $mapbodyheight;
    width: $mapbodywidth;
    // background-image: url('/img/theme/background/bg.png');
    background-color: rgb(0, 20, 38);
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    flex-direction: column;

    .maploading {
      position: absolute;
      margin-top: 20%;
      margin-left: 50%;
    }

    .calcite-map {
      position: absolute;
      width: $mapbodywidth;
      height: $mapbodyheight;

      .esri-widget {
        border: 1px solid rgba(32, 136, 245, 1);
        // background-color: rgba(32, 136, 245, 1);

        .esri-widget--button,
        &.esri-widget--button {
          width: $arcgis_widget_button_size;
          height: $arcgis_widget_button_size;
          font-size: $arcgis_widget_font_size;
        }
        [class*="esri-icon"],
        [role="button"] [class*="esri-icon"] {
          font-size: $arcgis_widget_icon_size;
        }

        &.esri-compass {
          .esri-compass__icon {
            font-size: $arcgis_widget_font_size + 5;
          }
        }
      }
      .esri-attribution {
        display: none;
      }
      
  .esri-ui-bottom-left,
  .esri-ui-bottom-right {
    flex-flow: column nowrap;
  }

  .esri-ui-bottom-left .esri-widget.esri-component,
  .esri-ui-bottom-right .esri-widget.esri-component {
    margin-top: 5px;
  }

  .esri-ui-top-left .esri-component,
  .esri-ui-top-right .esri-component {
    margin-bottom: 0px;
  }


      .esri-ui .esri-popup {
        z-index: 3;
        .esri-popup__main-container {
          .esri-popup__content::-webkit-scrollbar {
            display: none;
          }
          .esri-popup__content {
            // overflow-y: hidden;
            // overflow-x: hidden;
            margin-top: -5px;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 2px;
          }
        }
      }
      &.esri-view-width-xlarge {
        .esri-popup__main-container {
          width: 600px;
        }
      }
      &.esri-view-height-medium {
        .esri-popup__main-container {
          max-height: 400px;
        }
      }
      &.esri-view-width-large {
        .esri-popup__main-container {
          width: 500px;
        }
      }
      &.esri-view-height-less-than-medium {
        .esri-popup__main-container {
          max-height: 400px;
        }
      }
      &.esri-view-width-medium {
        .esri-popup__main-container {
          width: 400px;
        }
      }
      .esri-popup.esri-widget {
        max-height: 100%;
      }
      .esri-popup__header {
        h1 {
          margin: 0;
        }
        .esri-popup__button {
          padding: 12px 7px 10px;
        }
      }
      .esri-popup .esri-popup-collapsed {
        .esri-popup__content,
        .esri-popup__footer {
          display: none;
        }
        .esri-widget h1 {
          margin: 0;
        }
      }

      &.calcite-widgets-dark {
        &.top-header {
          position: relative;
          background-color: $theme_dark_arcgis_widget_bg;
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          flex-shrink: 0;

          .header-center-decoration {
            width: 40%;
            height: 60px;
            margin-top: 30px;
          }

          .header-left-decoration,
          .header-right-decoration {
            width: 25%;
            height: 60px;
          }

          .center-title {
            position: absolute;
            font-size: 30px;
            color: $theme_dark_arcgis_widget_color;
            font-weight: bold;
            left: 50%;
            top: 15px;
            transform: translateX(-50%);
          }
        }

        &.floatWindow {
          width: 500px;
          height: 600px;
          background: $theme_dark_arcgis_widget_bg !important;
          color: $theme_dark_arcgis_widget_color !important;

          .titlebar {
            background: linear-gradient(rgb(215, 215, 215), rgb(0, 191, 191)) !important;
          }

          .content {
            .el-card {
              background-color: rgba(82, 118, 216, 1) !important;
            }
          }
        }

        .esri-widget.esri-abovebelowswitch,
        .esri-widget.esri-areameasurement,
        .esri-widget.esri-disatancemeasurement,
        .esri-widget.esri-basemapswitch,
        .esri-widget.esri-buildingSencelayerFilter,
        .esri-widget.esri-mapsceneviewswitch,
        //二三维切换控件，点击按钮实现切换，不等拖拽实现二三维切换
        .esri-widget.esri-measurementtool,
        .esri-widget.esri-bmapgallery,
        .esri-widget.esri-mapsencethemeSettings,
        .esri-widget.esri-addresslocation-search,
        .esri-widget.esri-mapsenceswitch,
        // Only select widgets
        .esri-widget.esri-fullscreen,
        .esri-widget.esri-direct-line-measurement-3d,
        .esri-widget.esri-area-measurement-3d,
        .esri-widget.esri-area-measurement-2d,
        .esri-widget.esri-distance-measurement-2d,
         .esri-widget.esri-grid,
         .esri-widget.esri-HoloGraphic,
        .esri-widget.esri-expand,
        .esri-widget.esri-layer-list,
        .esri-widget.esri-home,
        .esri-widget.esri-zoom,
        .esri-widget.esri-compass,
        .esri-widget.esri-locate,
        .esri-widget.esri-track,
        .esri-navigation-toggle.esri-widget,
        // 3d
        // .esri-popup .esri-widget,
        .esri-widget .esri-menu,
        .esri-search.esri-widget,
        .esri-search .esri-search__input,
        .esri-navigation-toggle {

          // background: linear-gradient(to right, #285ac2, #218fce);
          background-color: $theme_dark_arcgis_widget_bg;
          color: $theme_dark_arcgis_widget_color;

          .esri-widget--button {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
          }

          &.esri-widget--button:not(.esri-search__submit-button):active,
          &.esri-widget--button:not(.esri-search__submit-button):hover,
          .esri-widget--button:not(.esri-search__submit-button):active,
          .esri-widget--button:not(.esri-search__submit-button):hover {
            background-color: $theme_dark_arcgis_active_background !important;
            color: $theme_dark_arcgis_active_text_color !important;
          }

          .esri-widget--button.esri-disabled {
            color: $theme_dark_arcgis_disabled_text_color;
          }
        }

        .esri-widget.esri-areameasurement {

          // border-radius: 50%;
          &.active {
            color: red;
          }
        }

        .esri-widget.esri-disatancemeasurement {
          // border-radius: 50%;

          &.active {
            color: red;
          }
        }

        //图片样式未使用，使用的是icon 字体样式
        .esri-widget.esri-basemapswitch {
          &.esri-basemap-dark {
            background-image: url(/img/dark/mapType_as.jpg);
          }

          &.esri-basemap-light {
            background-image: url(/img/dark/mapType_zw.jpg);
          }

          &.esri-basemap-imagery {
            background-image: url(/img/dark/mapType_img.jpg);
          }
        }

        .esri-widget.esri-buildingSencelayerFilter {
          width: 300px;
          height: 480px;
          max-height: 800px;
          display: flex;
          flex-flow: column;

          .esri-buildingSencelayerFilter_filterheader {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            margin-top: 10px;
            text-align: center;
            height: 0px;
            font-size: 20px;
          }

          .esri-buildingSencelayerFilter_slider {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            overflow: auto;
            height: 320px;
            max-height: 640px;
            margin-top: 10px;

            .esri-slider__track {
              background-color: $theme_dark_arcgis_widget_color;
            }

            .esri-slider__tick-label {
              font-size: 14px;
            }

            &::-webkit-scrollbar {
              width: 10px !important;
              height: 1px !important;
            }

            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 10px $theme_dark_arcgis_widget_color !important;
              background: $theme_dark_arcgis_widget_bg !important;
            }

            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px $theme_dark_arcgis_widget_color !important;
              border-radius: 10px !important !important;
              background: $theme_dark_arcgis_widget_bg !important;
            }

            .esri-slider__content {
              &::-webkit-scrollbar {
                width: 10px !important;
                height: 1px !important;
              }

              &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 10px $theme_dark_arcgis_widget_color !important;
                background: $theme_dark_arcgis_widget_bg !important;
              }

              &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px $theme_dark_arcgis_widget_color !important;
                border-radius: 10px !important !important;
                background: $theme_dark_arcgis_widget_bg !important;
              }
            }
          }

          .esri-buildingSencelayerFilter_model {
            margin-top: 10px;
            height: 0px;
            font-size: 20px;
            text-align: center;
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;

            input[type='radio'] {
              margin-right: 5px;
            }

            label {
              margin-right: 10px;
            }
          }

          .esri-buildingSencelayerFilter_btn {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            width: 100px;
            margin-left: 100px;
            margin-top: 30px;
            height: 30px;
          }
        }

        .esri-widget.esri-measurementtool>div {
          &.active {
            background-color: $theme_dark_arcgis_active_background
          }
        }

        .esri-widget.esri-area-measurement-3d {
          .esri-area-measurement-3d__measurement {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
          }
        }

        .esri-widget.esri-direct-line-measurement-3d {
          .esri-direct-line-measurement-3d__measurement {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
          }
        }

        .esri-widget.esri-area-measurement-2d {
          .esri-area-measurement-2d__measurement {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
          }
        }

        .esri-widget.esri-distance-measurement-2d {
          .esri-distance-measurement-2d__measurement {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
          }
        }

        .esri-widget.esri-bmapgallery {
          width: 914px;
          height: 100px;
          // background-image: url(/img/dark/basemap_bg.png);
          // background-color: transparent !important;
          // border: solid 10px red;
          display: flex;
          flex-flow: row;

          .esri-bmapgallery-bg {
            margin-left: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            display: flex;
            flex-flow: row;

            .esri-bmapgallery-image {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_image_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-zw {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_street_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }

            }

            .esri-bmapgallery-as {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-switch-underground {
              position: absolute;
              bottom: 15px;
              right: 10px;
              display: flex;
              flex-flow: row;

              &.invisible {
                display: none;
              }

              .esri-bmapgallery-switch-underground-checkbox {
                float: left;
                position: relative;
                font-size: 100px;
                width: 42px;
                height: 20px;
                border-radius: 30px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                transition: all .2s ease;
                border: 0.2px #296098 solid;
                background-color: $Calcite_Gray_700_Dark;
              }

              .esri-bmapgallery-switch-underground-checkbox::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                border-radius: 50%;
                transition: all .2s ease;
                background-color: $theme_dark_arcgis_widget_bg;
              }

              .esri-bmapgallery-switch-underground-checkbox:checked::after {
                left: 50%;
              }

              .esri-bmapgallery-switch-underground-checkbox:checked {
                background-color: $Calcite_Gray_700_Dark;
                border: 0.2px $Calcite_Gray_700_Dark solid;
              }

              .esri-bmapgallery-switch-underground-h4 {
                color: $Calcite_Gray_700_Dark;
              }

              .esri-bmapgallery-switch-underground-h4 {
                margin-top: 6px;
                margin-left: 5px;
                margin-right: 5px;
              }
            }

            .active {
              box-shadow: 1px 0px 10px $theme_dark_arcgis_widget_color inset;
              border: 0.1px $theme_dark_arcgis_widget_color solid;
            }
          }
        }

        .esri-widget.esri-bmapgallery-expand {
          // width: 494px;
          // height: 100px;
          // background-image: url(/img/dark/basemap_bg.png);
          // background-color: transparent !important;
          // -moz-background-size: 100% 100%;
          // background-size: 100% 100%;
          background-color: $theme_dark_arcgis_widget_bg;
          // border: solid 10px red;
          display: flex;
          flex-flow: row nowrap;

          .esri-bmapgallery-expand-bg {
            display: none;
            margin-left: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: $theme_dark_arcgis_widget_bg1;
            color: $theme_dark_arcgis_widget_color;
            display: flex;
            flex-flow: row;

            &.invisible {
              display: none;
            }

            .esri-bmapgallery-expand-image {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_image_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-expand-zw {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_street_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }

            }

            .esri-bmapgallery-expand-as {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }
            .esri-bmapgallery-expand-switch-underground {
              // position: absolute;
              bottom: 15px;
              right: 10px;
              display: flex;
              flex-flow: row;

              &.invisible {
                display: none;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox {
                float: left;
                position: relative;
                font-size: 100px;
                width: 32px;
                margin-top: 25px;
                height: 20px;
                border-radius: 30px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                transition: all .2s ease;
                border: 0.2px #296098 solid;
                background-color: $Calcite_Gray_700_Dark;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                border-radius: 50%;
                transition: all .2s ease;
                background-color: $theme_dark_arcgis_widget_bg;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox:checked::after {
                left: 50%;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox:checked {
                background-color: $Calcite_Gray_700_Dark;
                border: 0.2px $Calcite_Gray_700_Dark solid;
              }

              .esri-bmapgallery-expand-switch-underground-h4 {
                color: $Calcite_Gray_700_Dark;
              }

              .esri-bmapgallery-expand-switch-underground-h4 {
                margin-top: 25px;
                margin-left: 5px;
                margin-right: 5px;
              }
            }

            .active {
              box-shadow: 1px 0px 10px $theme_dark_arcgis_widget_color inset;
              border: 0.1px $theme_dark_arcgis_widget_color solid;
            }
          }

          .esri-bmapgallery-expand-display {

            &.esri-bmapgallery-expand-boundary {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_boundary.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_boundary_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            &.esri-bmapgallery-expand-image {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_image_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            &.esri-bmapgallery-expand-zw {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_street_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }

            }

            &.esri-bmapgallery-expand-as {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/dark/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/dark/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }
          }
        }


        .esri-widget.esri-expand {
          .esri-expand__container {

            .esri-expand__content {
              ::-webkit-scrollbar {
                width: 10px !important;
                height: 1px !important;
              }

              ::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 10px $theme_dark_arcgis_widget_color !important;
                background: $theme_dark_arcgis_widget_bg !important;
              }

              ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px $theme_dark_arcgis_widget_color !important;
                border-radius: 10px !important !important;
                background: $theme_dark_arcgis_widget_bg !important;
              }
            }


          }
        }

        .esri-widget.esri-layer-list {
          .esri-layer-list__item {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;

            .esri-layer-list__item-container {
              background-color: $theme_dark_arcgis_widget_bg;
              color: $theme_dark_arcgis_widget_color;

              .esri-layer-list__child-toggle {
                color: $theme_dark_arcgis_widget_color;
              }

              .esri-layer-list__item-label {
                .esri-layer-list__item-toggle {
                  color: $theme_dark_arcgis_widget_color;
                }
              }

              .esri-layer-list__item-actions-menu {
                color: $theme_dark_arcgis_widget_color;

                .esri-layer-list__item-actions-menu-item {
                  color: $theme_dark_arcgis_widget_color;
                }
              }
            }

            .esri-layer-list__item-actions {
              background-color: $Calcite_Gray_400_Dark;
              color: $theme_dark_arcgis_widget_color;
            }
          }
        }

        .esri-widget.esri-legend {
          background-color: $theme_dark_arcgis_widget_bg;
          color: $theme_dark_arcgis_widget_color;
          max-height: 900px !important;

          .esri-legend__service-label {
            color: $theme_dark_arcgis_widget_color;
          }

          ::-webkit-scrollbar {
            width: 10px !important;
            height: 1px !important;
          }

          ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px $theme_dark_arcgis_widget_color !important;
            background: $theme_dark_arcgis_widget_bg !important;
          }

          ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px $theme_dark_arcgis_widget_color !important;
            border-radius: 10px !important !important;
            background: $theme_dark_arcgis_widget_bg !important;
          }
        }

        .esri-widget.esri-addresslocation-search {
          background-color: $theme_dark_arcgis_widget_bg;
          display: flex;
          flex-flow: column nowrap;
          padding: 2px;
          max-height: 753px;

          .esri-addresslocation-search-box {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            display: flex;
            flex-flow: row;
            border: 1px;

            .esri-addresslocation-search-box-text {
              color: $theme_light_arcgis_widget_color;
              height: 35px;
              width: 250px;
              //  font-size: 30px;
            }

            .esri-addresslocation-search-box-button {
              color: $theme_dark_arcgis_widget_color;
              margin-left: 10px;
              margin-top: 5px;

              //  width:35px;
              >span {
                font-size: 20px;
              }
            }
          }

          .esri-addresslocation-search-content {
            max-height: 700px;
            overflow-y: auto;

            .locationaddress {
              padding: 5px;
              display: flex;
              flex-flow: row;
              background-color: $theme_dark_arcgis_widget_bg;
              color: $theme_dark_arcgis_widget_color;
              border: 1px;

              .locationaddress-image {
                width: 30px;
                height: 60px;
              }

              .locationaddress-text {
                width: 250px;
                height: 60px;
                display: flex;
                flex-flow: column;

                .location-poi {
                  width: 250px;
                  height: 30px;
                  // font-size: 21px;
                }

                .location-qx {
                  width: 250px;
                  height: 30px;
                  // font-size: 21px;
                }
              }
            }

            .locationaddress.active {
              background-color: $theme_dark_arcgis_active_background;
            }

          }
        }


        .el-table th,
        .el-table tr {
          background-color: transparent !important;
          color: $theme_dark_arcgis_widget_color !important;
        }

        .el-table,
        .el-table__expanded-cell {
          background-color: transparent !important;
          color: $theme_dark_arcgis_widget_color !important;
        }

        .esri-popup__header {
          .esri-popup__header-container--button {
            display: none;
          }

          .esri-popup__header-buttons {
            .esri-popup__button.esri-popup__button--dock {
              display: none;
            }
          }
        }

        .esri-popup .esri-widget,
        .esri-popup .esri-popup-main,
        .esri-popup .esri-pointer.esri-pointer-direction,
        .esri-popup .esri-button,
        .esri-popup .esri-popup__main-container {
          background-color: $theme_dark_arcgis_widget_bg1;
          color: $theme_dark_arcgis_widget_color;

          .esri-widget__table {
            color: $theme_dark_arcgis_widget_color;
          }

          .popupbg {
            background-color: $theme_dark_arcgis_widget_bg1;
          }

          .popupfg {
            color: $theme_dark_arcgis_widget_color;
          }
        }

        .esri-widget__table tr td,
        .esri-widget__table tr th {
          height: 60px;
          font-size: 24px;
        }

        // Zoom
        .esri-zoom {
          .esri-widget--button {
            &:last-child {
              border-top: solid 0px $theme_dark_arcgis_widget_border;
            }
          }
        }

        // Search

        .esri-search {
          .esri-search__submit-button {
            border-left: solid 1px $theme_dark_arcgis_widget_border;
          }

          .esri-input.esri-search__input {
            &::-webkit-input-placeholder {
              /* Chrome/Opera/Safari */
              color: $theme_dark_arcgis_placholder;
            }

            &::-moz-placeholder {
              /* Firefox 19+ */
              color: $theme_dark_arcgis_placholder;
            }

            &:-ms-input-placeholder {
              /* IE 10+ */
              color: $theme_dark_arcgis_placholder;
            }

            &:-moz-placeholder {
              /* Firefox 18- */
              color: $theme_dark_arcgis_placholder;
            }
          }

          .esri-menu li:active,
          .esri-menu li:focus,
          .esri-menu li:hover,
          .esri-search__clear-button:hover {
            background-color: $theme_dark_arcgis_active_background;
            color: $theme_dark_arcgis_active_text_color;
          }
        }

        .esri-widget {
          .esri-menu li {
            border-top: solid 1px $theme_dark_arcgis_widget_border;
          }
        }

        // Popup
        .esri-popup__button {
          color: $theme_dark_arcgis_widget_color;
        }

        .esri-popup__pointer-direction {
          background-color: $theme_dark_arcgis_widget_bg;
        }

        .esri-popup .esri-button:focus,
        .esri-popup .esri-button:hover,
        .esri-popup__button:focus,
        .esri-popup__button:hover {
          color: $theme_dark_control_text_color_hover;
        }

        // .esri-widget table {
        //   color: $theme_dark_control_text_color;
        // }

        // .esri-widget table tr:nth-child(even) {
        //   background-color: rgba(105, 105, 105, 0.7)
        // }

        // .esri-widget table tr:nth-child(odd) {
        //   background-color: rgba(250, 250, 250, 0.1)
        // }

        // .esri-popup .esri-popup-content::-webkit-scrollbar {
        //   background-color: rgba(200, 200, 200, 0.2);
        // }

        // .esri-popup .esri-popup-content::-webkit-scrollbar-thumb {
        //   background-color: rgba(200, 200, 200, 0.6);
        // }

        // NavToggle (3D)
        .esri-navigation-toggle:hover .esri-navigation-toggle__button,
        .esri-navigation-toggle:focus .esri-navigation-toggle__button {
          color: $theme_dark_control_text_color_hover;
        }

        .esri-navigation-toggle__button:before {
          border-color: transparent $theme_dark_control_text_color transparent transparent;
        }

      }

      &.calcite-widgets-light {
        &.top-header {
          position: relative;
          background-color: $theme_light_arcgis_widget_bg;
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          flex-shrink: 0;

          .header-center-decoration {
            width: 40%;
            height: 60px;
            margin-top: 30px;
          }

          .header-left-decoration,
          .header-right-decoration {
            width: 25%;
            height: 60px;
          }

          .center-title {
            position: absolute;
            font-size: 30px;
            color: $theme_light_arcgis_widget_color;
            font-weight: bold;
            left: 50%;
            top: 15px;
            transform: translateX(-50%);
          }
        }

        .esri-widget.esri-abovebelowswitch,
        .esri-widget.esri-areameasurement,
        .esri-widget.esri-disatancemeasurement,
        .esri-widget.esri-basemapswitch,
        .esri-widget.esri-buildingSencelayerFilter,
        .esri-widget.esri-mapsceneviewswitch,
        //二三维切换控件，点击按钮实现切换，不等拖拽实现二三维切换
        .esri-widget.esri-measurementtool,
        .esri-widget.esri-bmapgallery,
        .esri-widget.esri-mapsencethemeSettings,
        .esri-widget.esri-addresslocation-search,
        .esri-widget.esri-mapsenceswitch,
        .esri-widget.esri-fullscreen,
        .esri-widget.esri-direct-line-measurement-3d,
        .esri-widget.esri-area-measurement-3d,
        .esri-widget.esri-area-measurement-2d,
        .esri-widget.esri-distance-measurement-2d,
        .esri-widget.esri-grid,
        .esri-widget.esri-HoloGraphic,
        .esri-widget.esri-expand,
        .esri-widget.esri-layer-list,
        .esri-widget.esri-home,
        .esri-widget.esri-zoom,
        .esri-widget.esri-compass,
        .esri-widget.esri-locate,
        .esri-widget.esri-track,
        .esri-navigation-toggle.esri-widget,
        // 3d
        // .esri-popup .esri-widget,
        .esri-widget .esri-menu,
        .esri-search.esri-widget,
        .esri-search .esri-search__input,
        .esri-navigation-toggle {
          background-color: $theme_light_arcgis_widget_bg;
          color: $theme_light_arcgis_widget_color;

          .esri-widget--button {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
          }

          &.esri-widget--button:not(.esri-search__submit-button):active,
          &.esri-widget--button:not(.esri-search__submit-button):hover,
          .esri-widget--button:not(.esri-search__submit-button):active,
          .esri-widget--button:not(.esri-search__submit-button):hover {
            background-color: $theme_light_arcgis_active_background !important;
            color: $theme_light_arcgis_active_text_color !important;
          }

          .esri-widget--button.esri-disabled {
            color: $theme_light_arcgis_widget_color;
          }
        }

        .esri-widget.esri-areameasurement {

          // border-radius: 50%;
          &.active {
            color: red;
          }
        }

        .esri-widget.esri-disatancemeasurement {

          // border-radius: 50%;
          &.active {
            color: red;
          }
        }

        //图片样式未使用，使用的是icon 字体样式
        .esri-widget.esri-basemapswitch {
          &.esri-basemap-dark {
            background-image: url(/img/light/mapType_as.jpg);
          }

          &.esri-basemap-light {
            background-image: url(/img/light/mapType_zw.jpg);
          }

          &.esri-basemap-imagery {
            background-image: url(/img/light/mapType_img.jpg);
          }
        }

        .esri-widget.esri-buildingSencelayerFilter {
          width: 300px;
          height: 480px;
          max-height: 800px;
          display: flex;
          flex-flow: column;

          .esri-buildingSencelayerFilter_filterheader {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
            margin-top: 10px;
            text-align: center;
            height: 0px;
            font-size: 20px;
          }

          .esri-buildingSencelayerFilter_slider {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
            overflow: auto;
            height: 320px;
            max-height: 640px;
            margin-top: 10px;

            .esri-slider__track {
              background-color: $theme_light_arcgis_widget_color;
            }

            &::-webkit-scrollbar {
              width: 10px !important;
              height: 1px !important;
            }

            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 10px $theme_light_arcgis_widget_color !important;
              background: $theme_light_arcgis_widget_bg !important;
            }

            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px $theme_light_arcgis_widget_color !important;
              border-radius: 10px !important !important;
              background: $theme_light_arcgis_widget_bg !important;
            }

            .esri-slider__tick-label {
              font-size: 14px;
            }

            .esri-slider__content {
              &::-webkit-scrollbar {
                width: 10px !important;
                height: 1px !important;
              }

              &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 10px $theme_light_arcgis_widget_color !important;
                background: $theme_light_arcgis_widget_bg !important;
              }

              &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px $theme_light_arcgis_widget_color !important;
                border-radius: 10px !important !important;
                background: $theme_light_arcgis_widget_bg !important;
              }
            }
          }

          .esri-buildingSencelayerFilter_model {
            margin-top: 10px;
            height: 0px;
            font-size: 20px;
            text-align: center;
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;

            input[type='radio'] {
              margin-right: 5px;
            }

            label {
              margin-right: 10px;
            }
          }

          .esri-buildingSencelayerFilter_btn {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
            height: 30px;
            width: 100px;
            margin-top: 30px;
            margin-left: 100px;

          }
        }

        .esri-widget.esri-measurementtool>div {
          &.active {
            background-color: $theme_light_arcgis_active_background
          }
        }

        .esri-widget.esri-area-measurement-3d {
          .esri-area-measurement-3d__measurement {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
          }
        }

        .esri-widget.esri-direct-line-measurement-3d {
          .esri-direct-line-measurement-3d__measurement {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
          }
        }

        .esri-widget.esri-area-measurement-2d {
          .esri-area-measurement-2d__measurement {
            background-color: $theme_dark_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
          }
        }

        .esri-widget.esri-distance-measurement-2d {
          .esri-distance-measurement-2d__measurement {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
          }
        }


        .esri-widget.esri-expand {
          .esri-expand__container {
            .esri-expand__content {
              ::-webkit-scrollbar {
                width: 10px !important;
                height: 1px !important;
              }

              ::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 10px $theme_light_arcgis_widget_color !important;
                background: $theme_light_arcgis_widget_bg !important;
              }

              ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px $theme_light_arcgis_widget_color !important;
                border-radius: 10px !important !important;
                background: $theme_light_arcgis_widget_bg !important;
              }
            }
          }
        }

        .esri-widget.esri-bmapgallery {
          width: 914px;
          height: 100px;
          display: flex;
          flex-flow: row;
          // background-image: url(/img/light/basemap_bg.png);
          // background-color: transparent !important;

          .esri-bmapgallery-bg {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_dark_arcgis_widget_color;
            margin-left: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            flex-flow: row;

            .esri-bmapgallery-image {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_light_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_image_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-zw {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_street_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-as {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-switch-underground {
              position: absolute;
              bottom: 15px;
              right: 10px;
              display: flex;
              flex-flow: row;

              &.invisible {
                display: none;
              }

              .esri-bmapgallery-switch-underground-checkbox {
                float: left;
                position: relative;
                font-size: 100px;
                width: 42px;
                height: 20px;
                border-radius: 30px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                transition: all .2s ease;
                border: 0.2px #296098 solid;
                background-color: $Calcite_Gray_300;
              }

              .esri-bmapgallery-switch-underground-checkbox::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                border-radius: 50%;
                transition: all .2s ease;
                background-color: $Calcite_Gray_100;
              }

              .esri-bmapgallery-switch-underground-checkbox:checked::after {
                left: 50%;
              }

              .esri-bmapgallery-switch-underground-checkbox:checked {
                background-color: $Calcite_Gray_300;
                border: 0.2px $Calcite_Gray_200 solid;
              }

              .esri-bmapgallery-switch-underground-h4 {
                color: $Calcite_Gray_700;
                margin-top: 6px;
                margin-left: 5px;
                margin-right: 5px;
              }
            }

            .active {
              box-shadow: 1px 0px 10px $Calcite_Gray_300 inset;
              border: 0.1px $Calcite_Gray_200 solid;
            }
          }
        }

        .esri-widget.esri-bmapgallery-expand {
          // width: 494px;
          // height: 100px;
          // background-image: url(/img/light/basemap_bg.png);
          // background-color: transparent !important;
          //  -moz-background-size: 100% 100%;
          //  background-size: 100% 100%;
          // border: solid 10px red;
          background-color: $theme_light_arcgis_widget_bg;
          display: flex;
          flex-flow: row nowrap;

          .esri-bmapgallery-expand-bg {
            display: none;
            margin-left: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: $theme_light_arcgis_widget_bg1;
            color: $theme_light_arcgis_widget_color;
            display: flex;
            flex-flow: row;

            &.invisible {
              display: none;
            }

            .esri-bmapgallery-expand-image {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_light_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_image_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_light_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-expand-zw {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_light_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_street_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_light_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }

            }

            .esri-bmapgallery-expand-as {
              margin: 10px;
              width: 80px;
              height: 60px;
              color: $theme_light_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_light_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            .esri-bmapgallery-expand-switch-underground {
              // position: absolute;
              bottom: 15px;
              right: 10px;
              display: flex;
              flex-flow: row;

              &.invisible {
                display: none;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox {
                float: left;
                position: relative;
                font-size: 100px;
                width: 32px;
                margin-top: 25px;
                height: 20px;
                border-radius: 30px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                transition: all .2s ease;
                border: 0.2px #296098 solid;
                background-color: $Calcite_Gray_300;
                ;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                border-radius: 50%;
                transition: all .2s ease;
                background-color: $Calcite_Gray_100;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox:checked::after {
                left: 50%;
              }

              .esri-bmapgallery-expand-switch-underground-checkbox:checked {
                background-color: $Calcite_Gray_300;
                border: 0.2px $Calcite_Gray_200 solid;
              }

              .esri-bmapgallery-expand-switch-underground-h4 {
                color: $Calcite_Gray_700;
              }

              .esri-bmapgallery-expand-switch-underground-h4 {
                margin-top: 25px;
                margin-left: 5px;
                margin-right: 5px;
              }
            }

            .active {
              box-shadow: 1px 0px 10px $Calcite_Gray_300 inset;
              border: 0.1px $Calcite_Gray_200 solid;
            }
          }

          .esri-bmapgallery-expand-display {
            &.esri-bmapgallery-expand-boundary {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_boundary.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_boundary_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            &.esri-bmapgallery-expand-image {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_image.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_image_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

            &.esri-bmapgallery-expand-zw {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_street.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_street_active.png);
                background-repeat: round;
              }

              >span {
                //  font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }

            }

            &.esri-bmapgallery-expand-as {
              margin: 20px;
              width: 80px;
              height: 60px;
              color: $theme_dark_arcgis_widget_color;
              border: 0px;
              background-image: url(/img/light/i_darkgray.png);
              background-repeat: round;

              &.active {
                background-image: url(/img/light/i_darkgray_active.png);
                background-repeat: round;
              }

              >span {
                // font-size: 10px;
                color: $theme_dark_arcgis_widget_color;

                &.mapName {
                  float: right;
                  position: relative;
                  bottom: -42px
                }
              }
            }

          }
        }

        .esri-widget.esri-addresslocation-search {
          background-color: $theme_light_arcgis_widget_bg;
          display: flex;
          flex-flow: column nowrap;
          padding: 2px;
          max-height: 735px;

          .esri-addresslocation-search-box {
            background-color: $theme_light_arcgis_widget_bg;
            color: $theme_light_arcgis_widget_color;
            display: flex;
            flex-flow: row;
            border: 1px;

            .esri-addresslocation-search-box-text {
              color: $theme_light_arcgis_widget_color;
              height: 35px;
              width: 250px;
              // font-size: 30px;
            }

            .esri-addresslocation-search-box-button {
              color: $theme_light_arcgis_widget_color;
              margin-left: 10px;
              margin-top: 5px;
              // width:50px;

              >span {
                font-size: 20px;
              }
            }
          }

          .esri-addresslocation-search-content {
            max-height: 700px;
            overflow-y: auto;

            .locationaddress {
              display: flex;
              flex-flow: row;
              padding: 5px;
              background-color: $theme_light_arcgis_widget_bg;
              color: $theme_light_arcgis_widget_color;

              border: 1px;

              .locationaddress-image {
                width: 30px;
                height: 60px;
              }

              .locationaddress-text {
                width: 250px;
                height: 60px;
                display: flex;
                flex-flow: column;

                .location-poi {
                  width: 250px;
                  height: 30px;
                  // font-size: 21px;
                }

                .location-qx {
                  width: 250px;
                  height: 30px;
                  //  font-size: 21px;
                }
              }
            }

            .locationaddress.active {
              background-color: $theme_light_arcgis_active_background;
            }

          }
        }

        .esri-widget.esri-legend {
          background-color: $theme_light_arcgis_widget_bg;
          color: $theme_light_arcgis_widget_color;
          max-height: 900px !important;

          .esri-legend__service-label {
            color: $theme_light_arcgis_widget_color;
          }

          ::-webkit-scrollbar {
            width: 10px !important;
            height: 1px !important;
          }

          ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 10px $theme_light_arcgis_widget_color !important;
            background: $theme_light_arcgis_widget_bg !important;
          }

          ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px $theme_light_arcgis_widget_color !important;
            border-radius: 10px !important !important;
            background: $theme_light_arcgis_widget_bg !important;
          }
        }

        .esri-popup__header {
          .esri-popup__header-container--button {
            display: none;
          }

          .esri-popup__header-buttons {
            .esri-popup__button.esri-popup__button--dock {
              display: none;
            }
          }
        }

        .esri-popup .esri-popup-main,
        .esri-popup .esri-pointer .esri-pointer-direction,
        .esri-popup .esri-button,
        .esri-popup .esri-popup__main-container {
          background-color: $theme_light_arcgis_widget_bg1;
          color: $theme_light_arcgis_widget_color;

          .popupbg {
            background-color: $theme_light_arcgis_widget_bg1;
          }

          .popupfg {
            color: $theme_light_arcgis_widget_color;
          }
        }

        .esri-widget__table tr td,
        .esri-widget__table tr th {
          height: 60px;
          font-size: 24px;
        }

        .el-table th,
        .el-table tr {
          background-color: transparent !important;
          color: $theme_light_arcgis_widget_color !important;
        }

        .el-table,
        .el-table__expanded-cell {
          background-color: transparent !important;
          color: $theme_light_arcgis_widget_color !important;
        }

        // Zoom
        .esri-zoom {
          .esri-widget--button {
            &:last-child {
              border-top: solid 0px $theme_light_arcgis_widget_border;
            }
          }
        }
      }
    }
  }
}
